.homeWrapper {
  width: calc(100% - var(--viewRightWidth));
  .iconList {
    display: flex;
    justify-content: flex-end;
    .iconStyle {
      margin-right: 10px;
      font-size: 24px;
    }
  }
  .articleListRow,
  .articleListCol {
    margin-top: 15px;
    transition: all 1s;
  }
  .label {
    position: relative;
    left: 50%;
    z-index: 3;
    display: flex;
    width: 100%;
    margin-top: 30px;
    margin-bottom: 10px;
    padding: 0 15px;
    font-size: 22px;
    background-color: var(--background-primary);
    border-radius: 10px;
    transform: translateX(-50%);
    .tab {
      margin: 10px;
      text-align: center;
      background-color: var(--tabBg);
      border-radius: 5px;
      cursor: pointer;
      opacity: 0.6;
      &:hover {
        opacity: 1;
      }
    }
  }
}
.articleListRow {
  :global {
    .lbbArticleList {
      grid-template-columns: 1fr;
      .lbbArticleItem {
        display: flex;
        flex-direction: row;
        height: 200px;
        .lbbPicture {
          flex: 1;
          & > img {
            min-width: var(--article-bg-width120);
            height: 100%;
            border-radius: var(--article-radius-size);
          }
          & > span {
            width: var(--article-bg-width120);
            height: 100%;
          }
          &::after {
            width: calc(var(--article-bg-width120) + 1%);
            height: 100%;
            background: var(--gradient-cover);
          }
        }
      }
    }
  }
}
@media only all and (max-width: 1024px) {
  .articleListRow {
    :global {
      .lbbArticleList {
        .lbbArticleItem {
          .lbbPicture {
            flex: 4;
          }
          .lbbRightContent {
            flex: 5;
          }
        }
      }
    }
  }
  .articleListCol {
    :global {
      .lbbArticleList {
        grid-template-columns: 1fr;
        .lbbArticleItem {
          display: flex;
          flex-direction: column;
          width: 100%;
          height: 300px;
          .lbbPicture {
            flex: 1.5;
            & > img {
              width: var(--article-bg-width100);
              min-height: var(--article-bg-height180);
              border-top-left-radius: var(--article-radius-size);
              border-top-right-radius: var(--article-radius-size);
            }
            & > span {
              width: var(--article-bg-width100);
              height: var(--article-bg-height180);
            }
            &::after {
              width: var(--article-bg-width100);
              height: calc(var(--article-bg-height180) + 1%);
              background: var(--article-cover);
            }
          }
        }
      }
    }
  }
}
